<template>
	<view class="my">
		<view class="personal" v-if="login">
			<button type="primary" open-type="getUserInfo" plain="false" @getuserinfo="wxLogin">
				<image :src="userInfo.avatarUrl" mode=""></image>
			</button>
			<view class="personal-des">
				<button plain="false" size="mini">{{userInfo.nickName}}</button>
				<button plain="false" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">绑定手机号</button>
			</view>
		</view>
		<view class="personal" v-else>
			<button type="primary" open-type="getUserInfo" plain="false" @getuserinfo="wxLogin">
				<image src="../../static/icon/collect.png" mode=""></image>
			</button>
			<view class="personal-des">
				<button plain="false" @getuserinfo="wxLogin" size="mini">未登录</button>
				<button plain="false" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">绑定手机号</button>
			</view>
		</view>
		<view class="lists">
			<view class="list" v-for="(item,index) in lists" @click="handleTo(item.url)">
				<image :src="item.img" mode=""></image>
				<text>{{item.title}}</text>
				<image src="../../static/icon/rightarrow.png" mode="" class="rightarrow"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				islogin:false,
				userInfo:{},
				lists:[
					{
						title:'我的题库',
						img:'../../static/icon/myquestionBank.png',
						url:''
					},
					{
						title:'练习历史',
						img:'../../static/icon/myhistory.png',
						url:''
					},
					{
						title:'我的班级',
						img:'../../static/icon/myclass.png',
						url:''
					},
					{
						title:'我的客服',
						img:'../../static/icon/myserver.png',
						url:''
					},
					{
						title:'关于我们',
						img:'../../static/icon/myabout.png',
						url:''
					},
					{
						title:'设置',
						img:'../../static/icon/myset.png',
						url:''
					}
				]
			}
		},
		methods: {
			// 微信登录授权
			wxLogin(e){
				var _this = this;
				console.log(e.detail)
				// this.login = true;
				// this.userInfo = e.detail.userInfo;
				if(e.detail.userInfo){
					uni.showToast({
						title:'授权成功',
						duration:500
					})
					//实现微信登录
					uni.login({
						provider:'weixin',
						success(loginResult){
							var code = loginResult.code;
							var userInfo = e.detail.userInfo;
							_this.login(userInfo)
						}
					})
				}else{
					uni.showToast({
						title:'授权失败',
						duration:1000,
						image:"/static/icon/shibai.png"
					})
				}
			},
			//登录
			login(UserInfo,code){
				var _this = this;
				uni.request({
					url:'',
					data :{
						"avatarUrl": userInfo.avatarUrl,
						"nickName" : UserInfo.nickName,
						"code": code
					},
					method:'POST',
					success(res) {
						if(res.data.status === 1){
							var userInfo = res.data.data;
							uni.showToast({
								title:'登录成功',
								duration:1000
							})
							this.islogin = true;
							uni.setStorageSync("access_token",userInfo);
						}else{
							
						}
					}
				})
			},
			//用户信息 传递给后端
			login(userInfo){
				
			},
			//获取手机号 个人账号，无法获取手机号
			getPhoneNumber(e){
				console.log(e)
			},
			handleTo(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style>
/* my */
.my{
	position: absolute;
	width: 100%;
	height: 100%;
	background:#EEEEEE;
}
/* personal */
.personal{
	padding-top: 50rpx;
	box-sizing: border-box;
	height: 300rpx;
	background: #66CC99;
	padding-left: 40rpx;
}
.personal button{
	float: left;
	border: none!important;
}
.personal image{
	width: 150rpx;
	height: 150rpx;
	border-radius: 50%;
}
.personal-des{
	float:left;
	margin-left: 20rpx;
	display: flex;
	flex-direction: column;
}
.personal-des button{
	font-size: 32rpx;
	border: none!important;
	color: #FFFFFF;
	font-weight: 600;
}
/* lists */
.lists {
	padding-top: 20rpx;
	width: 100%;
	background: #FFFFFF;
}
.list {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 80rpx;
	box-sizing: border-box;
	padding: 0 10rpx;
	border-bottom: 4rpx dashed #EEEEEE;
	margin-bottom: 16rpx;
}
.list image {
	width: 50rpx;
	height: 50rpx;
}
.list text{
	margin-left:-480rpx;
}
.list .rightarrow{
	width:30rpx;
	height: 30rpx;
}
</style>
